<template>
  <view class="u-page warning">
    <u-list @scrolltolower="scrolltolower">
      <u-list-item v-for="(item, index) in alarmList" :key="index">
        <view class="card" @click="handleJump(item)">
          <view class="card_title clear">
            <view class="card_title-left clear">
              <view class="left-circle" v-if="item.isRead === '0'"></view>
              <view class="left-num">预警编号：{{ item.alarmId }}</view>
            </view>
            <view :class="['card_title-right', getColor(item.isDeal)]">{{
              item.isDeal | filtersDealStatus
            }}</view>
          </view>
          <view class="title">
            {{ item.typeName }}-{{ item.alarmLevel | filterLevel }}
          </view>
          <view class="content">
            <view class="content-label"> 内容： </view>
            <view class="content-text">
              {{ item.alarmInfo }}
            </view>
          </view>
          <view class="time clear">
            <view class="time-label"> {{ item.alarmTime }} </view>
            <view class="time-btn">
              <u-button
                type="primary"
                shape="circle"
                text="查看"
                
              ></u-button>
            </view>
          </view>
        </view>
      </u-list-item>
      <u-loadmore :status="status" v-show="isShow" />
      <u-empty mode="list" :marginTop="200" :show="isEmpty"> </u-empty>
    </u-list>
  </view>
</template>

<script>
import { getAlarmList } from '@/api/alarm'
export default {
  data() {
    return {
      alarmList: [],
      
      status: 'nomore',
      tabBarInfo: {
        shipName: '',
        alarmName: '',
        alarmTypeId: '',
      },
      query: {
        current: 1,
        size: 10,
      },
      total: 0,
      isShow: false,
      isEmpty: false,
    }
  },
  filters: {
    // 预警级别
    filterLevel(value) {
      switch (value) {
        case 0:
          return '一级预警'
        case 1:
          return '二级预警'
        case 2:
          return '三级预警'
        case 3:
          return '四级预警'
        case 4:
          return '五级预警'

        default:
          break
      }
    },
    // 处理状态
    filtersDealStatus(v) {
      // 处理状态 0 未处理 1已处理 2忽略
      switch (v) {
        case 0:
          return '未处理'
        case 1:
          return '已处理'
        case 2:
          return '忽略'
        default:
          break
      }
    },
  },
  onLoad(e) {
    console.log(e)
    this.tabBarInfo = e
  },
  onShow() {
    console.log('onshow', this.query)
    this.alarmList = []
    this.getAlarmList(true)
  },
  onReady() {
    uni.setNavigationBarTitle({
      title: this.tabBarInfo.shipName + '-' + this.tabBarInfo.alarmName,
    })
  },
  methods: {
    /** 状态颜色 */
    getColor(v) {
      // 处理状态 0 未处理 1已处理 2忽略
      switch (v) {
        case 0:
          return 'blue'
        case 1:
          return 'green'
        case 2:
          return 'grey'
        default:
          break
      }
    },
    getAlarmList(isF) {
      if (isF) {
        this.query = {
          current: 1,
          size: 10,
        }
      }
      uni.showLoading({
        title: '加载中',
        mask: true,
      })
      let params = {
        ...this.query,
        typeId: this.tabBarInfo.alarmTypeId || '',
      }
      // 环境预警除外
      if (this.tabBarInfo.alarmTypeId != 7) {
        params.shipId = this.tabBarInfo.shipId
      }
      console.log(params)
      getAlarmList(params).then((res) => {
        console.log('预警列表', res)
        this.alarmList = isF ? res.records : this.alarmList.concat(res.records)
        this.total = res.total
        if (res.total === 0) {
          this.isEmpty = true
        }
        if (
          this.query.current * this.query.size > res.total &&
          res.total != 0
        ) {
          this.status = 'nomore'
          this.isShow = true
        } else {
          this.status = 'loading'
        }
        uni.hideLoading()
      })
    },
    handleJump(item) {
      uni.navigateTo({
        url: '/subShip/alarm/detail/index?alarmId=' + item.alarmId,
      })
    },
    scrolltolower() {
      console.log('触底')
      this.isShow = true
      let { size, current } = this.query
      if (current * size < this.total) {
        this.query.current++
        this.getAlarmList()
      } else {
        this.status = 'nomore'
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.warning {
  background: $uni-bg-color;
  .card {
    margin: 20rpx 30rpx 0;
    background: #fff;
    border-radius: 8px;
    @include active();
    .card_title {
      padding: 20rpx;
      position: relative;
      .card_title-left {
        float: left;

        .left-circle {
          float: left;
          background: #dc3031;
          border-radius: 50%;
          width: 20rpx;
          height: 20rpx;
          margin-top: 9rpx;
        }
        .left-num {
          float: left;
          padding: 0 10rpx;
          color: $uni-text-color-grey;
        }
      }
      .card_title-right {
        float: right;
        padding: 0 20rpx;
      }
      .blue {
        color: $uni-color-primary;
      }
      .green {
        color: $uni-color-success;
      }
      .grey {
        color: $uni-text-color-grey;
      }
      ::after {
        @include setBottomLine($uni-border-color);
      }
    }
    .title {
      padding: 20rpx;
      font-size: 40rpx;
      color: $uni-text-color;
    }
    .content {
      padding: 10rpx 20rpx;
      font-size: 32rpx;
      .content-label {
        float: left;
        color: $uni-text-color-grey;
      }
      .content-text {
        color: $uni-text-color;
        width: 80%;
        @include text-overflow;
      }
    }
    .time {
      // font-size: 36rpx;

      padding: 20rpx;
      line-height: 60rpx;
      .time-label {
        float: left;
        color: $uni-text-color-grey;
      }
      .time-btn {
        float: right;
      }
    }
  }
}
.clear {
  &::before {
    content: '';
    display: table;
  }
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}
.u-button--normal {
  padding: 10rpx 30rpx;
}
.u-button {
  height: inherit;
}
</style>
